<template>
	<!-- components/nav.wxml -->
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<template v-if="isDrag">
			<!-- 可拖拽按钮 -->
			<button plain hover-class="none" class="customer drag-customer" v-if="minxins_csSwitch" id="drag_customer"
				open-type="contact" :style="'left: ' + btnLeft + 'px; top:' + btnTop + 'px;'"
				:class="{ transition: isDock && !isMove }" @touchstart="touchstart" @touchmove.stop.prevent="touchmove"
				@touchend="touchend">
				<image src='https://oos-cn.ctyunapi.cn/front-end/static/customer.png' class="customer_img"></image>
			</button>
		</template>
		<template v-else>
			<!-- 固定客服按钮-原代码 -->
			<button plain hover-class="none" class="customer def-customer" v-if="minxins_csSwitch" open-type="contact">
				<image src='https://oos-cn.ctyunapi.cn/front-end/static/customer.png' class="customer_img"></image>
			</button>
		</template>
		<!-- #endif -->
	</view>
</template>
<script>
const https_1 = require('@/api/https.js');
const app = getApp()
export default {
	name: 'customer',
	props: {
		// 是否可拖动
		isDrag: {
			type: Boolean,
			default: true
		},

		// 是否自动贴边
		isDock: {
			type: Boolean,
			default: true
		},

		// 是否兼容tabbar页面
		existTabBar: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			minxins_csSwitch: false,
			// 拖拽配置参数
			defBtnWh: 52, // 按钮默认宽度
			btnTop: 0, // 拖拽按钮顶部位置
			btnLeft: 0, // 拖拽按钮左侧位置
			btnWidth: 0, // 拖拽按钮宽度
			btnHeight: 0, // 拖拽按钮高度
			offsetWidth: 0,
			offsetHeight: 0,
			windowWidth: 0,
			windowHeight: 0,
			isMove: true, // 是否正在拖拽
			edge: 10, // 边缘留白
		}
	},
	mounted() {
		console.log('执行了没有组件')
		this.getConfig_tow()
	},

	methods: {
		// 获取按钮配置参数
		getBtnOptions() {
			const sys = uni.getSystemInfoSync();
			this.windowWidth = sys.windowWidth;
			this.windowHeight = sys.windowHeight;
			// console.log('---sys---', sys);

			// 兼容处理tabbar高度
			if (this.existTabBar) {
				this.windowHeight -= 70 // tabbar 的高度(手机上看不会向上偏移，调试器会向上偏移)
			}

			if (sys.windowTop) {
				this.windowHeight += sys.windowTop;
			}

			// 获取缓存位置
			const cache_top = uni.getStorageSync('CUSTOMER_TOP')
			const cache_left = uni.getStorageSync('CUSTOMER_LEFT')

			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('#drag_customer').boundingClientRect(data => {
					// console.log('---drag_customer---', data);
					const tempWidth = data ? data.width : this.defBtnWh
					const tempHeight = data ? data.height : this.defBtnWh
					this.btnWidth = tempWidth;
					this.btnHeight = tempHeight;
					this.offsetWidth = tempWidth / 2;
					this.offsetHeight = tempHeight / 2;

					if (cache_top || cache_left) {
						// 获取缓存拖动位置
						this.btnTop = cache_top
						this.btnLeft = cache_left
					} else {
						// 默认右下角
						this.btnTop = this.windowHeight - this.btnHeight - this.edge;
						this.btnLeft = this.windowWidth - this.btnWidth - this.edge;
						console.log('默认右下角', this.btnTop, this.btnLeft);
					}
				}).exec();
			})
		},

		// 按钮触摸开始
		touchstart(e) {
			// this.$emit('btnTouchstart');
		},

		// 按钮触摸移动
		touchmove(e) {
			// 单指触摸
			if (e.touches.length !== 1) {
				return false;
			}

			this.isMove = true;

			this.btnLeft = e.touches[0].clientX - this.offsetWidth;

			let clientY = e.touches[0].clientY - this.offsetHeight;
			// #ifdef H5
			// clientY += this.btnHeight;
			// #endif
			let edgeBottom = this.windowHeight - this.btnHeight - this.edge; // 底部边缘

			// 上下触及边界
			if (clientY < this.edge) {
				// console.log('到顶了');
				this.btnTop = this.edge;
			} else if (clientY > edgeBottom) {
				// console.log('到底了');
				this.btnTop = edgeBottom;
			} else {
				this.btnTop = clientY
			}
		},

		// 触摸解除
		touchend(e) {
			// 贴边
			if (this.isDock) {
				let edgeRigth = this.windowWidth - this.btnWidth - this.edge;

				// 左右触及边界
				if (this.btnLeft < this.windowWidth / 2 - this.offsetWidth) {
					this.btnLeft = this.edge; // 左边
				} else {
					this.btnLeft = edgeRigth; // 右边
				}
			}

			// 拖拽完成，缓存位置
			this.isMove = false;
			uni.setStorageSync('CUSTOMER_TOP', this.btnTop)
			uni.setStorageSync('CUSTOMER_LEFT', this.btnLeft)
		},

		getConfig_tow() {
			// #ifdef MP-WEIXIN
			let that = this
			// 支付分功能添加全局客服按钮显示---变量
			if (uni.getStorageSync('token')) {
				https_1
					.getStyleConfig(getApp().globalData.sellerId)
					.then(res => {
						if (res.code == 0) {
							getApp().globalData.minxins_csSwitch = res.data.csSwitch
							that.minxins_csSwitch = res.data.csSwitch

							if (that.isDrag) {
								// 开启拖拽配置处理
								that.$nextTick(() => {
									that.getBtnOptions()
								})
							}
						}
					})
			}
			// #endif
		},
	}
}
</script>
<style lang="less">
.customer {
	width: 100rpx;
	height: 100rpx;
	z-index: 99999;
	padding: 0;
	border: none !important;

	&::after {
		border: none;
	}

	.customer_img {
		width: 100rpx;
		height: 100rpx;
	}
}

// 固定客服按钮
.def-customer {
	position: fixed;
	right: 40rpx;
	bottom: 250rpx;
}

// 拖拽客服按钮
.drag-customer {
	position: fixed;

	.transition {
		transition: left .3s ease, top .3s ease;
	}
}
</style>
